<style lang="scss">
@import '@/assets/css/variable';
.detail{
	background-image: linear-gradient(to bottom, #003792 , #01617a);
	// box-sizing: border-box;
	// text-align: center;
	.imgBox{
		// margin-top: 3.2rem;
		.topImg{
			width: 210px;
		}
	}
	.title{
		margin-top: 2.4rem;
		margin-bottom: 2.4rem;
	}
	.listItem{
		.contentHeight{
			height: 80px;
		}
		.text{
			padding: 10px 0;
		}
	}
	a{
		color: #00c5fd !important;
		&:active{
			color: #FFFFFF !important;
		}
	}
	.van-button--normal{
		padding: 0 30px !important;
	}
}
</style>

<template>
  <div class="detail wrapperContent2 padding-lr-l fc-f4f4f4" @scroll="scrollBottom">
	<div class="pad-t-16" @click="$router.go(-1)||$router.replace('/index')">
		<van-icon name="arrow-left" color="#ffffff" size="20"/>
	</div>
	<div class="imgBox mar-center text-center">
		<img class="topImg" src="../../assets/img/policy/detail/detailTitle.png">
	</div>
	<div class="title line-h-m t-bold letter-s-1" :style="{fontSize:fontSize==1?'18px':'22px'}">{{detail.title}}</div>
	<item-detail>
		<div class="label text-center t-bold letter-s-1" :style="{fontSize:fontSize==1?'16px':'20px'}">政策内容</div>
		<div class="text line-h-s letter-s-1 mar-t-10 text-justify over-hid" :class="expand?'':'contentHeight ellipsis-line4'" v-html="detail.policy_content" :style="{fontSize:fontSize==1?'14px':'18px'}"></div>
		<div class="expanse text-center fs-11 mar-t-10 flex align-center justify-center" v-if="isShowExpand">
			<van-icon :name="expand?'arrow-up':'arrow-down'" />
			<span class="mar-l-3" @click="expand=!expand" :style="{fontSize:fontSize==1?'13px':'16px'}">{{expand?'收起内容':'展开内容'}}</span>
		</div>
	</item-detail>
	<item-detail>
		<div class="label text-center t-bold letter-s-1" :style="{fontSize:fontSize==1?'16px':'20px'}">申请要求</div>
		<div class="text line-h-s letter-s-1 mar-t-10 text-justify over-hid" v-html="detail.policy_apply_ask" :style="{fontSize:fontSize==1?'14px':'18px'}"></div>
	</item-detail>
	<item-detail>
		<div class="label text-center t-bold letter-s-1" :style="{fontSize:fontSize==1?'16px':'20px'}">申请渠道</div>
		<div class="text line-h-s letter-s-1 mar-t-10 text-justify over-hid" v-html="detail.policy_apply_channel" :style="{fontSize:fontSize==1?'14px':'18px'}"></div>
	</item-detail>
	<div class="flex align-center justify-between pad-b-30" :style="{fontSize:fontSize==1?'14px':'18px'}">
		<div class="flex align-center justify-start">
			<div class="flex align-center" @click="shareBtn">
				<van-icon name="share" color="#ffffff"/>
				<span class="mar-l-5">转发</span>
			</div>
			<div class="flex align-center mar-l-20" @click="collect(detail)">
				<van-icon name="star" :color="detail.is_collect==1?'#ffaa00':'#ffffff'"/>
				<span class="mar-l-5">{{detail.is_collect==1?'已收藏':'收藏'}}</span>
			</div>
		</div>
		<div class="flex align-center mar-l-20" @click="applyPolicy(detail)" v-if="isShowApplyBtn">
			<!-- <van-icon name="send-gift" color="#ffffff"/>
			<span class="mar-l-5">{{detail.is_apply==1?'已申请':'申请'}}</span> -->
			<van-button round :color="detail.is_apply==1?'#0b81a5':'#00c5af'"><span :style="{fontSize:fontSize==1?'14px':'18px'}">{{detail.is_apply==1?'已申请':'申请'}}</span></van-button>
		</div>
		<!-- 00c5af -->
	</div>
	<open-in-web></open-in-web>
  </div>
</template>
<script>
import { myMixins } from "@/assets/js/mixins.js";
import ItemDetail from '@/components/listItem/ItemDetail.vue';
import OpenInWeb from "@/components/OpenInWeb.vue";
import {Dialog,Toast} from 'vant'
export default {
  name:'detail',
  mixins: [myMixins],
  components: {ItemDetail,OpenInWeb},
  data() {
    return {
		isShowApplyBtn:false,
		isShowExpand:true,
		expand:false,
		searchText:'',
		searchTag:['老人老人','军人老人','残疾人'],
		active:4,
		tabList:[{id:0,text:'全部'},{id:1,text:'毕业生'},{id:2,text:'失业人员'},{id:3,text:'退役军人'},{id:4,text:'残疾人退役军人'}],
		detail:''
    };
  },
  created() {
    // document.title = "网络学习首页";
	
	
	console.log('refreshDetail')
	this.bus.$on('refreshDetail',(item)=>{
		this.detail = item
		// // this.detail.policy_content = '政策内容政策内容政策政策内容内容政策内容政政策内容政策内容政策政策内容内容政策内容政策内容政策内容政策内容政策内容政策内容政策政策内容内容政策内容政策内容政策内容政策内容政策内容政策内容政策政策内容内容政策内容政策内容政策内容政策内容策政策内容政策内容政策政策内容内容政策内容政策内容政策内容政策内容政策内容政策内容政策政策内容内容政策内容政策内容政策内容政策内容内容政策内容政策内容政策内容政策内容政策政策内容内容政策内容政策内容政策内容政策内容政策内容政策内容政策政策内容内容政策内容政策内容政策内容政策内容'
		this.computedTextLen(item.policy_content)
		// console.log("detail",this.detail)
		this.getDetail()
	})
  },
  beforeDestroy() {
	console.log('$off_refreshDetail')
  	this.bus.$off('refreshDetail')
  },
  mounted() {
	this.getDetail()
	// this.getWeixinConfig()
  },
  beforeRouteLeave(to, from, next) {
      //设置下一个路由的meta,让列表页面缓存,即不刷新
      to.meta.keepAlive = true;
      next();
  },
  methods: {
	  // getWeixinConfig() {
	  //   console.log('getWeixinConfig')
	  //   const _this = this;
	  //   const url = (location.href.split('#')[0])
	  //   let params = {
	  // 	  url
	  //   };
	  //   console.log('params',params)
	  //   _this.$request.getWeixinConfig(params).then((res) => {
	  // 	  console.log('res_getWeixinConfig',res)
		 //  const weixinConfig = res.data
	  // 	  _this.$store.commit('setWeixinConfig',weixinConfig)
		 //  _this.shareInit(location.href)
	  //   });
	  // },
	  shareBtn() {
		  this.$store.commit('setIsWeixin',true)
	  },
	  applyPolicy(detail) {
		  if(detail.is_apply==1) return
		  Dialog.confirm({
		    title: '系统提示',
		    message: '政策一旦申请不可主动撤销，请确认是否要申请该政策？',
		  }).then((res) => {
		      // on confirm
			  console.log('res',res)
			  if(res=='confirm') {
				   const params = {
				     policy_id: this.detail.id
				   }
				   //申请该政策
				   this.$request.applyPolicy(params).then(res=>{
				  		console.log('res',res)
						if(res.code == 200) {
							this.detail.is_apply = 1
							Dialog({ title:'温馨提示', message: '申请成功', closeOnClickOverlay:true });
						}
				   });
			  }
		    }).catch(() => {
		      // on cancel
		    });
		 
	  },
	  collect(detail) {
		  const params = {
		    id: this.detail.id
		  }
		  if(detail.is_collect==1){
			  //取消收藏
			  this.$request.cancelCollect(params).then(res=>{
			  	console.log('res',res)
				this.detail.is_collect = 0
				this.bus.$emit('refreshList')
			  });
		  }else{
			  //收藏
			  this.$request.collect(params).then(res=>{
			  	console.log('res',res)
				this.detail.is_collect = 1
				// <van-icon name="success" />
				if(res.code==200){
					Toast({
						message:'收藏成功',
						// icon:'success'
					})
				}
			  });
		  }
	  },
	  computedTextLen(policy_content) {
		  if(policy_content.length<70){
			  this.isShowExpand = false
			  console.log('isShowExpand',this.isShowExpand)
		  }
	  },
	  getDetail() {
		  const params = {
		    id: this.$route.query.id
		  }
		  console.log('params',params)
		  this.$request.getDetails(params).then(res=>{
		  	console.log('getDetail_res',res)
			this.detail = res.data
			// this.detail.policy_content = '政策内容政策内容政策政策内容内容政策内容政政策内容政策内容政策政策内容内容政策内容政策内容政策内容政策内容政策内容政策内容政策政策内容内容政策内容政策内容政策内容政策内容政策内容政策内容政策政策内容内容政策内容政策内容政策内容政策内容策政策内容政策内容政策政策内容内容政策内容政策内容政策内容政策内容政策内容政策内容政策政策内容内容政策内容政策内容政策内容政策内容内容政策内容政策内容政策内容政策内容政策政策内容内容政策内容政策内容政策内容政策内容政策内容政策内容政策政策内容内容政策内容政策内容政策内容政策内容'
			this.shareInit(location.href,this.detail)
			if(localStorage.getItem('lastPage')=='/matchResult'){
				this.isShowApplyBtn = true
			}
			if(res.code == 202) {
				Dialog.alert({
				  title: '温馨提示',
				  message: res.msg,
				  closeOnClickOverlay:true
				}).then((res) => {
				  // on close
				  console.log(res)
				  // this.$router.go(-1)
				});
			}else{
				if(this.detail.policy_content){
					this.computedTextLen(this.detail.policy_content)
				}
			}
		  });
	  },
    searchBtn() {
		console.log("search")
	},
	scrollBottom(e) {
		// console.log('e',e)
		const {scrollTop, clientHeight, scrollHeight} = e.target
		// console.log(scrollTop, clientHeight, scrollHeight)
		if (scrollTop + clientHeight === scrollHeight){
			console.log('滚动到底部啦')
		}
	},
  }
}

</script>